<template>
  <div class="detail">
    <div class="content">
      <div class="detail-up">
        <!-- 左侧放大镜区域 -->
        <div class="img">
          <Zoom :imageList="detailStore.productInfo.imageList"></Zoom>
          <ImageList :imageList="detailStore.productInfo.imageList"></ImageList>
        </div>
        <!-- 右侧选择区域 -->
        <div class="info">
          <div class="name-box">
            <div class="name">
              {{ detailStore.productInfo.productName
              }}{{ detailStore.productInfo.description }}
            </div>
          </div>
          <div class="price-box">
            <div class="item">
              <span class="tit">价格</span>
              <div class="con">
                <div class="price">
                  ￥<span class="big">{{ detailStore.productInfo.price }}</span>
                </div>
              </div>
              <span class="tit">剩余库存</span>
              <div class="con">{{ detailStore.productInfo.quantity }}</div>
            </div>
          </div>
          <div class="sku-box">
            <div class="items">
              <span class="tit">数量</span>
              <div class="con">
                <div class="goods-number">
                  <span
                    class="reduce"
                    :class="{ limit: number <= 1 }"
                    @click="handleMinus"
                    >-</span
                  >
                  <input type="number" class="number" v-model="number" />
                  <span class="increase" @click="number++">+</span>
                </div>
              </div>
            </div>
          </div>
          <div class="btns">
            <a href="javascript:;" class="buy-now" @click="buyNow">立即购买</a>
            <a href="javascript:;" class="add-cart" @click="addshopCart"
              >加入购物车</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="detail">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import useDetailStore from "@/stores/modules/detail";
import useTradeStore from "@/stores/modules/trade";
import useUserStore from "@/stores/modules/user";
import { addCart } from "@/api/shopcart";
import Zoom from "./zoom/index.vue";
import ImageList from "./imageList/index.vue";

let userId = useUserStore().user._id;
let detailStore = useDetailStore();
let tradeStore = useTradeStore();

//获取路由器对象
let $router = useRouter();
let $route = useRoute();

// 农产品id
let id = $route.params.id;
let isCharProduct = $route.query.charProduct;
let isProduct = $route.query.product;

let number = ref<number>(1);

const handleMinus = () => {
  if (number.value <= 1) {
    return;
  }
  number.value--;
};

// 立即购买
const buyNow = async () => {
  if (isProduct) {
    let data = { quantity: number.value, productId: id, charProductId: "" };
    await tradeStore.confirmOrder(data);
    $router.push("/submit-order");
  }
  if (isCharProduct) {
    let data = { quantity: number.value, productId: "", charProductId: id };
    await tradeStore.confirmOrder(data);
    $router.push("/submit-order");
  }
};

// 加入购物车
const addshopCart = async () => {
  if (useUserStore().userInfo) {
    $router.push("/login");
  } else {
    if (isProduct) {
      let data = {
        userId,
        quantity: number.value,
        productId: id,
        charProductId: "",
      };
      let result = await addCart(data);
      if (result.code == 200) {
        ElMessage.success(result.msg);
      } else {
        ElMessage.error(result.msg);
      }
    }
    if (isCharProduct) {
      let data = {
        userId,
        quantity: number.value,
        productId: "",
        charProductId: id,
      };
      let result = await addCart(data);
      if (result.code == 200) {
        ElMessage.success(result.msg);
      } else {
        ElMessage.error(result.msg);
      }
    }
  }
};

onMounted(async () => {
  await detailStore.getGoodsInfo(id as string);
});
</script>

<style lang="scss" scoped>
.detail {
  min-height: 535px;
  padding-bottom: 40px;
  font-size: 12px;
  .content {
    width: 1200px;
    margin: auto;
    .detail-up {
      display: flex;
      margin-top: 20px;
      .img {
        width: 450px;
        margin-right: 40px;
      }
      .info {
        flex: 1;
        .name-box {
          margin-bottom: 15px;
          margin-top: 5px;
          .name {
            font-size: 20px;
            line-height: 28px;
          }
        }
        .price-box {
          background: #f9f9f9;
          border-top: 1px dotted #eee;
          border-bottom: 1px dotted #eee;
          padding: 0 0 13px;
          line-height: 24px;
          margin-top: -1px;
          margin-bottom: 20px;
          .item {
            display: flex;
            margin-top: 15px;
            height: 30px;
            line-height: 35px;
            .tit {
              margin: 0 15px;
              color: #999;
            }
            .con {
              display: flex;
              flex: 1;
              .price {
                font-size: 18px;
                height: 30px;
                line-height: 30px;
                display: flex;
                align-items: baseline;
                font-family: arial;
                color: #e1251b;
                .big {
                  font-size: 26px;
                }
              }
            }
          }
        }
        .sku-box {
          .items {
            display: flex;
            margin-top: 10px;
            .tit {
              margin: 0 15px;
              color: #999;
              display: block;
              line-height: 30px;
            }
            .con {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              .goods-number {
                height: 30px;
                .reduce {
                  display: inline-block;
                  vertical-align: top;
                  width: 30px;
                  height: 30px;
                  background: #e9e9e9;
                  font-size: 22px;
                  text-align: center;
                  line-height: 26px;
                  color: #999;
                  cursor: pointer;
                }
                .number {
                  border: 0;
                  width: 60px;
                  height: 30px;
                  text-align: center;
                  font-family: arial;
                  vertical-align: top;
                }
                .increase {
                  display: inline-block;
                  vertical-align: top;
                  width: 30px;
                  height: 30px;
                  background: #e9e9e9;
                  font-size: 22px;
                  text-align: center;
                  line-height: 26px;
                  color: #999;
                  cursor: pointer;
                }
                .limit {
                  cursor: not-allowed;
                  color: #ccc;
                }
              }
            }
          }
        }
        .btns {
          margin-top: 30px;
          padding-left: 15px;
          display: flex;
          .buy-now {
            background: #e1251b;
            color: #fff;
            height: 48px;
            line-height: 48px;
            padding: 0 50px;
            font-size: 16px;
            border-radius: 2px;
            text-decoration: none;
          }
          .add-cart {
            margin-left: 10px;
            background: #ffdedf;
            border: 1px solid #e1251b;
            color: #e1251b;
            height: 46px;
            line-height: 46px;
            padding: 0 50px;
            font-size: 16px;
            border-radius: 2px;
            text-decoration: none;
          }
        }
      }
    }
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
